<template>
    <el-drawer
        v-model="visible"
        :show-close="false"
        :size="550"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <template #header>
            <span class="drawer-title" v-show="!flag">
                <span @click="edit"
                    ><el-icon class="edit-icon"><EditPen /></el-icon
                    >{{ conditionConfig.nodeName }}</span
                >
            </span>
            <el-input
                ref="inputRef"
                v-model="conditionConfig.nodeName"
                v-show="flag"
                style="width: 70%"
                @blur="flag = false"
            />
        </template>

        <div>
            <span>调整优先级：</span>
            <el-select v-model="conditionConfig.priorityLevel">
                <el-option
                    v-for="item in conditionsConfig.conditionNodes.length"
                    :value="item"
                    :key="item"
                    >{{ item }}</el-option
                >
            </el-select>
        </div>
        <el-button type="primary" class="add-group" @click="addArr">添加条件组</el-button>
        <el-card
            v-for="(item, index) in conditionConfig.arrList"
            :key="index"
            style="margin-bottom: 20px"
            shadow="never"
        >
            <div class="group-header">
                <el-input v-model="item.name" style="width: 240px" />
                <el-button type="danger" :icon="Delete" circle @click="deleteItem(index)" />
            </div>
            <div class="group-content">
                <div class="content-title">
                    <span>符合以下条件</span>
                    <el-button type="primary" @click="openUser(item, index)">选择字段</el-button>
                </div>
                <el-divider content-position="left">申请单</el-divider>
                <el-tag
                    v-for="(tag, index) in item.dg_finance_order"
                    :key="tag"
                    class="mx-1"
                    style="margin-bottom: 5px"
                    closable
                    @close="deleteTag(item, index, 'dg_finance_order')"
                >
                    {{ tag.name }}
                </el-tag>
                <el-divider content-position="left">付款单</el-divider>
                <el-tag
                    v-for="tag in item.bills_of_payment"
                    :key="tag"
                    class="mx-1"
                    style="margin-bottom: 5px"
                    closable
                    @close="deleteTag(item, index, 'bills_of_payment')"
                >
                    {{ tag.name }}
                </el-tag>
            </div>
        </el-card>

        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="saveCondition">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </span>
        </template>
    </el-drawer>

    <fieldsDialog v-model:visible="tipVisible" :list="tipList" @setValue="setValue" />
</template>
<script setup>
import fieldsDialog from './../dialog/fieldsDialog.vue'
import { Delete } from '@element-plus/icons-vue'
import { ref, watch, computed } from 'vue'
import { useFlow } from '@/stores/modules/flow'

const inputRef = ref(null)
const flag = ref(false)
const edit = () => {
    flag.value = true
    inputRef.value.focus()
}
const tipList = ref([])
const tipVisible = ref(false)
const setValue = (value) => {
    tipList.value.dg_finance_order = [...value.order]
    tipList.value.bills_of_payment = [...value.pay]
}

const conditionsConfig = ref({
    conditionNodes: []
})
const conditionConfig = ref({})
const PriorityLevel = ref('')

const store = useFlow()

const { setCondition, setConditionsConfig } = store
const conditionsConfig1 = computed(() => store.conditionsConfig1)
const conditionDrawer = computed(() => store.conditionDrawer)
const visible = computed({
    get() {
        return conditionDrawer.value
    },
    set() {
        closeDrawer()
    }
})
watch(conditionsConfig1, (val) => {
    conditionsConfig.value = val.value
    PriorityLevel.value = val.priorityLevel
    conditionConfig.value = val.priorityLevel
        ? conditionsConfig.value.conditionNodes[val.priorityLevel - 1]
        : { nodeUserList: [], conditionList: [] }
})
const indexNum = ref(0)
const openUser = async (item, index) => {
    tipList.value = item
    indexNum.value = index
    tipVisible.value = true
}
const deleteTag = (item, index, type) => {
    item[type].splice(index, 1)
}

const addArr = () => {
    conditionConfig.value.arrList.push({
        name: `条件组${conditionConfig.value.arrList.length + 1}`,
        dg_finance_order: [],
        bills_of_payment: []
    })
}
const deleteItem = (index) => {
    conditionConfig.value.arrList.splice(index, 1)
}

const saveCondition = () => {
    closeDrawer()
    const a = conditionsConfig.value.conditionNodes.splice(PriorityLevel.value - 1, 1) //截取旧下标
    conditionsConfig.value.conditionNodes.splice(conditionConfig.value.priorityLevel - 1, 0, a[0]) //填充新下标
    conditionsConfig.value.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
    })
    conditionsConfig.value.conditionNodes.forEach((item, index) => {
        if (!item.pass && item.arrList.length > 0) {
            item.error = false
        }
    })
    setConditionsConfig({
        value: conditionsConfig.value,
        flag: true,
        id: conditionsConfig1.value.id
    })
}
const closeDrawer = () => {
    setCondition(false)
}
</script>
<style lang="scss" scope>
.drawer-title {
    color: #000;
    font-size: 16px;
    cursor: pointer;

    span {
        position: relative;
    }
}
.drawer-title span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: -5px;
    border-bottom: 1px solid #1989fa;
    opacity: 0;
}
.drawer-title span:hover::after {
    opacity: 1;
}
.add-group {
    margin: 20px 0;
}
.group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border-bottom: 1px solid #e3e3e3;
    position: relative;
}
.group-content {
    padding: 10px;
}
.content-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
.edit-icon {
    margin-right: 5px;
}
</style>
